'use client';

import { useState, useEffect, useCallback } from 'react';

/**
 * 管理交错动画的 Hook
 * @param itemCount 动画项目的数量
 * @param dependencies 依赖项数组，当其变化时重置动画
 * @returns 返回一个 key 和一个用于获取延迟的函数
 */
export const useStaggeredAnimation = (itemCount: number, dependencies: any[]) => {
  const [animationKey, setAnimationKey] = useState(0);

  // 当依赖项变化时，通过更新 key 来重置动画
  useEffect(() => {
    setAnimationKey(prevKey => prevKey + 1);
  }, dependencies);

  /**
   * 获取每个项目的动画延迟时间
   * @param index 项目的索引
   * @returns 延迟时间 (ms)
   */
  const getDelay = useCallback((index: number) => {
    return index * 100; // 每个项目延迟 100ms
  }, []);

  return { animationKey, getDelay };
};
